<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar title="编辑记录" :autoBack="true" bgColor="#9dae8a" placeholder></u-navbar>
		<view style="overflow: scroll;">
			<view v-for="item in list" :key="item.id" class="record-card" @click="onItemClick(item)">
				<view class="record-card-title">
					<text>{{ item.name }}</text>
					<view v-if="item.editType == 'add'" style="background-color: #9dae8a;" class="record-card-tag">新增</view>
					<view v-if="item.editType == 'update'" style="background-color: #007aff;" class="record-card-tag">修改</view>
					<view v-if="item.editType == 'delete'" style="background-color: #dd524d;" class="record-card-tag">删除</view>
				</view>
				<view class="record-card-info">
					<text class="info-text">编辑人: {{ item.user }}</text>
					<text class="info-text">{{ item.time }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getList();
		},
		data() {
			return {
				list: []
			};
		},
		methods: {
			onItemClick(item) {
				this.$toast.success(this,item.name)
			},
			getList() {
				this.list = [
					{
						id: '6846465468654',
						editType: 'add',
						name: '小精灵文胸',
						time: '2023-06-29 09:56:23',
						user: '初吻-31002',
						userId: '2313216542132132132',
						oldData: {},  //数据库存储json字符串
						newData: {}  //数据库存储json字符串
					},
					{
						id: '6846465468653',
						editType: 'update',
						name: '蕾丝内裤',
						time: '2023-06-29 09:48:14',
						user: '初吻-31002',
						userId: '2313216542132132132'
					},
					{
						id: '6846465468654',
						editType: 'delete',
						name: '小精灵文胸',
						time: '2023-06-29 09:56:23',
						user: '初吻-31002',
						userId: '2313216542132132132',
						oldData: {},  //数据库存储json字符串
						newData: {}  //数据库存储json字符串
					},
					{
						id: '6846465468653',
						editType: 'add',
						name: '蕾丝内裤',
						time: '2023-06-29 09:48:14',
						user: '初吻-31002',
						userId: '2313216542132132132'
					},
					{
						id: '6846465468654',
						editType: 'add',
						name: '小精灵文胸',
						time: '2023-06-29 09:56:23',
						user: '初吻-31002',
						userId: '2313216542132132132',
						oldData: {},  //数据库存储json字符串
						newData: {}  //数据库存储json字符串
					},
					{
						id: '6846465468653',
						editType: 'update',
						name: '蕾丝内裤',
						time: '2023-06-29 09:48:14',
						user: '初吻-31002',
						userId: '2313216542132132132'
					},
					{
						id: '6846465468654',
						editType: 'delete',
						name: '小精灵文胸',
						time: '2023-06-29 09:56:23',
						user: '初吻-31002',
						userId: '2313216542132132132',
						oldData: {},  //数据库存储json字符串
						newData: {}  //数据库存储json字符串
					},
					{
						id: '6846465468653',
						editType: 'add',
						name: '蕾丝内裤',
						time: '2023-06-29 09:48:14',
						user: '初吻-31002',
						userId: '2313216542132132132'
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.record-card {
		margin: 16px;
		padding: 16px;
		background-color: #fff;
		border-radius: 16px;
		box-shadow: 0 4px 12px 4px rgba(0,0,0,0.1);
		.record-card-title {
			font-weight: bold;
			font-size: 18px;
			height: 50px;
			display: flex;
			justify-content: space-between;
			.record-card-tag {
				height: 20px;
				border-radius: 12px;
				color: #fff;
				font-size: 14px;
				padding: 6px;
				letter-spacing: 2px;
			}
		}
		.record-card-info {
			border-top: 1px solid gainsboro;
			padding-top: 8px;
			display: flex;
			justify-content: space-between;
			.info-text {
				color: darkgray;
				font-size: 14px;
			}
		}
	}
</style>
